<template>
    <div class="home_menu">
        <el-scrollbar>
            <div class="menu-item" v-for="(item, index) in menus" :key="index"
                :class="{ 'menu-item__active': item.value == activeMenu.value }" @click="handleClick(item)">
                <div class="menu_detail">
                    <div>
                        <img :src="item.value == activeMenu.value ? item.icon_active : item.icon" style="width: 16px;height: 16px;margin-right: 10px;" alt="">
                    </div>
                    <div>{{ item.label }}</div>
                </div>

            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
const props = defineProps({
    menus: Array,
    activeMenu: Object
})


const handleClick = item => {
    props.activeMenu.value = item.value
    props.activeMenu.label = item.label
}
</script>

<style lang="scss" scoped>
.home_menu {
    width: 180px;
    height: 100%;
    background-color: #fff;
    margin-right: 16px;
}

.menu-item {
    line-height: 40px;
    cursor: pointer;
    font-family: PingFangSC;
    font-variant: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 0 8px 0;
    color: #1d2129
}

.menu-item .menu_detail {
    padding-left: 24px;
    border-right: 3px solid #fff;
    display: flex;
    align-items: center;
}

.menu-item__active .menu_detail {
    background-color: #f0f6ff;
    color: #3569fd;
    border-right: 3px solid #3569fd;

    // border-radius: 8px;
}
</style>